<template>
    <view>
    	<view class="blockfixed" :class="isIphoneXup?'isIPXup':''" v-if="isfixed"></view>
    	<view class="tarbar">
    	    <view
    	        class="tarbar-list"
    			:class="isIphoneXup?'isIPXup':''"
    	        :style="{
    	            background: tabBar.backgroundColor,
    	            color: tabBar.color,
    	            'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
    	            'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
    	        }"
    	    >
    	        <view class="tarbar-list-ul">
    	            <view class="tarbar-list-li" v-if="item.check" v-for="(item, index) in tabBar.list" :key="index" @click="setSelected(index)">
    	                <block>
    	                    <view class="tarbar-list-li-icon"><image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image></view>
    	                    <view class="tarbar-list-li-name" :style="{color:selected == index ? tabBar.selectedColor:tabBar.color}">{{ item.text }}</view>
    	                </block>
    	            </view>
    	        </view>
    	    </view>
    	</view>
    </view>
</template>

<script>
export default {
	props: {
		isfixed: {
		    type: Boolean,
		    default: () => {
		       return false;
		    }
		},
		selected:{
			type: Number,
			default () {
				return 0;
			}
		}
	},
    data() {
        return {
            tabBar: {
                color: "#7A7E83",
                selectedColor: "#CA0D08",
                borderStyle: '#ccc',
                backgroundColor: '#fff',
                position: 'bottom',
                list: [
                    {
                    	"pagePath": "pages/index/index",
                    	"iconPath": "/static/images/home.png",
                    	"selectedIconPath": "/static/images/home_hover.png",
                    	"text": "首页",
						"check":true
                    },{
                    	"pagePath": "pages/formPage/formPage",
                    	"iconPath": "/static/images/prize.png",
                    	"selectedIconPath": "/static/images/prize_hover.png",
                    	"text": "发起抽奖",
						"check":true
                    }, {
                    	"pagePath": "pages/mine/mine",
                    	"iconPath": "/static/images/mine.png",
                    	"selectedIconPath": "/static/images/mine_hover.png",
                    	"text": "我的",
						"check":true
                    }
                ]
            },
			isIphoneXup:false,////是否iphonex以及以上的版本
        };
    },
    mounted() {
		//获取当前设备机型
		this.isIphoneXup = app.globalData.isIphoneXup?app.globalData.isIphoneXup:false
		// console.log(this.tabBar.list)
	},
    methods: {
		//点击跳转
        setSelected(index) {
            console.log(index);
			if(Number(index)==1){
				uni.navigateTo({
					url:"/" + this.tabBar.list[index].pagePath
				})
			}else{
				uni.switchTab({
				    url: "/" + this.tabBar.list[index].pagePath
				});
			}
			//清除更新数据
            // this.$forceUpdate();
        },
    }
};
</script>

<style scoped>
.isIPXup{
    padding-bottom: 68rpx !important;
}	
.blockfixed{
	width: 100%;
	height: 120rpx;
}	
.tarbar {
    width: 100%;
    z-index: 9999;
    position: fixed;
}
.tarbar-list {
    width: 100%;
    background: #4d586f;
    position: fixed;
    left: 0;
    bottom: 0;
}
.tarbar-list-ul {
    width: 100%;
    height: 110rpx;
    display: flex;
	align-items: center;
	align-content: center;
    justify-content: space-between;
    box-sizing: border-box;
}
.tarbar-list-li {
    flex: 1;
}
.tarbar-list-li-icon {
    width: 45rpx;
    height: 45rpx;
    margin: 0 auto;
}
.tarbar-list-li-icon image {
    width: 45rpx;
    height: 45rpx;
}
.tarbar-list-li-name {
    width: 100%;
    text-align: center;
    line-height: 40rpx;
    font-size: 20rpx;
    height: 30rpx;
}
</style>